<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="wangbo">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            text-align: center;
            font-size: 40px;
            color: aliceblue;
            margin: 0 auto;
            width: 500px;
            height: 500px;
            line-height: 400px;
            /* 默认从上到下 */
            background-image: linear-gradient( #bde830, #90ff35);
            /*  添加方向 */
            /* background-image: linear-gradient(to right, #30e8bf, #ff8235); */
            /* 渐变程度 */
            /* background-image: linear-gradient(to bottom, #30e8bf 50%, #ff8235 50%); */
            /* background-image: linear-gradient(to bottom, #30e8bf 50%, #ff8235 50%); */
            /* 多角度 */
            /* background-image: linear-gradient(to bottom right, #30e8bf 50%, #ff8235 50%); */
            /* 多角度 */
            /* background-image: linear-gradient(135deg, #30e8bf 50%, #ff8235 50%); */
            /* 多颜色 */
            /* background-image:   linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);  */
            /* 透明度 */
            /* background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); */
            /* background: linear-gradient(60deg, rgba(250,250,250,1) 25%, rgba(210,210,210,1)); */
            /* background: linear-gradient(rgb(30, 30, 30), rgb(60, 60, 60) 35%, rgb(100, 100, 100) 50%, rgb(30, 30, 30) 65%); */
            /*做立体感按键*/
            border: 1px solid rgb(70, 70, 70);
            /* box-shadow: 1px 0px 0px rgb(0, 0, 0),
                0px 1px 0px rgb(0, 0, 0),
                -1px 0px 0px rgb(0, 0, 0),
                0px -1px 0px rgb(0, 0, 0); */
            /* border-radius: 4px;
            box-shadow:
                0px -50px 0px 0px red,
                -50px 0px 0px 0px blue,
                50px 0px 0px 0px green,
                0px 50px 0px 0px yellow; */
        }
    </style>
</head>

<body>
    <div>
        北京青芒教育
    </div>
</body>

</html>